<template>
	<view class="box" @click="toDetail">
		<view class="box_tag" v-if="item.isGroupBuying == '0'">团购</view>
		
		<view @click.stop="handleChecked">
			<u-checkbox v-model="item.checked" shape="circle" icon-size="20rpx"></u-checkbox>
		</view>

		<!-- 商品图片开始 -->
		<view class="center">
			<image :src="item.picUrl"></image>
			<!-- <image src="../static/login.jpg"></image> -->
		</view>
		<!-- 商品图片结束 -->

		<!-- 商品信息开始 -->
		<view class="right">
			<view class="r-title">
				<text>{{item.commodityName}}</text>
			</view>
			<view class="">
				<text v-if="item.itemArr" class="attr">{{item.itemArr}}</text>
			</view>
			<view class="price-box">
				<text>比加入时降2元</text>
				<view class="price" @click.stop="">
					<view class="content">
						¥<text>{{item.isGroupBuying=='1'?item.salesPrice:item.groupBuyPrice}}</text>
					</view>
					<u-number-box v-model="item.number" @change.stop="changeValue" :min="1">
					</u-number-box>
				</view>
			</view>
		</view>
		<!-- 商品信息结束 -->
	</view>
</template>

<script>
	export default {
		name: "cartItem",
		props: {
			type: String,
			item: {
				type: Object,
			}
		},
		data() {
			return {};
		},
		watch: {
			item: {
				handler(val) {},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			}
		},
		computed: {
			isShow() {
				const price = this.item.isGroupBuying == "1" ? this.item.salesPrice : this.item.groupBuyPrice
				return price
			}
		},
		onLoad() {},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: `/subPackages/goodsDetail/goodsDetail?code=${this.item.uniqueId}`
				})
			},
			changeValue(e) {
				this.$emit('PurchaseList', {
					id: this.item.id,
					number: e.value
				})
			},
			handleChecked() {
				this.$emit('changeChecked', {
					id: this.item.id,
					checked: this.item.checked ? 1 : 0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 224rpx;
		margin-bottom: 16rpx;
		background-color: #fff;
		padding: 32rpx 24rpx;
		border-radius: 16rpx;
		position: relative;
		.box_tag{
			position: absolute;
			top: 0;
			left: 0;
			width: 120rpx;
			height: 44rpx;
			text-align: center;
			background: url('../static/cart_tag.png');
			background-size: 120rpx 44rpx;
			color: #fff;
			font-size: 24rpx;
		}
		.left {}

		.center {
			height: 160rpx;
			width: 160rpx;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			height: 100%;
			display: flex;
			flex: 7;
			flex-direction: column;
			justify-content: space-between;

			.r-title {
				display: flex;
				justify-content: space-between;
				padding-right: 20rpx;
			}

			.attr {
				font-size: 24rpx;
				padding: 4rpx;
				background-color: #ccc;
				display: inline-block;
			}

			.price-box {
				color: red;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #FA5151;

				text {
					font-size: 20rpx;
					margin-bottom: 2rpx;
				}

				.price {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.content {
						color: #FA5151;
						font-size: 24rpx;

						text {
							font-size: 34rpx
						}
					}
				}
			}

		}
	}
</style>
